<template>
    <div class="video-view">
        <div class="right-v">
            <div class="right-v-one">
                <!--方案1-->
                <hkVideo class="video-img1" @desPlug="destroyPlugin" :props-data="hkList.camera01" />
                <!--方案2-->
                <!-- <rtspVideo :rtsp="rtspurl1" ref="video1"></rtspVideo> -->
                <!--方案3-->
                <!-- <flvVideo :flv="flvList.camera1"></flvVideo> -->
                <img src="@/assets/haihang/1.png" alt="" class="video-img" />
            </div>
            <div class="right-v-one">
                <hkVideo class="video-img2" :props-data="hkList.camera02" />
                <!-- <rtspVideo :rtsp="rtspurl2" ref="video2"></rtspVideo> -->
                <!-- <flvVideo :flv="flvList.camera2"></flvVideo> -->
                <img src="@/assets/haihang/2.png" alt="" class="video-img" />
            </div>
        </div>
        <div class="bottom-v">
            <!-- <flvVideo :flv="flvList.camera3"></flvVideo>
            <flvVideo :flv="flvList.camera4"></flvVideo>
            <flvVideo :flv="flvList.camera5"></flvVideo>
            <flvVideo :flv="flvList.camera6"></flvVideo> -->

            <img src="@/assets/haihang/3.png" alt="" class="video-img" />
            <img src="@/assets/haihang/4.png" alt="" class="video-img" />
            <img src="@/assets/haihang/5.png" alt="" class="video-img" />
            <img src="@/assets/haihang/6.png" alt="" class="video-img" />
        </div>
    </div>
</template>

<script>
import hkVideo from "../hkvideo.vue";
import rtspVideo from "../rtspVideo.vue";
import flvVideo from "../flvideo.vue";
export default {
    name: "videoBox",
    components: {
        hkVideo,
        rtspVideo,
        flvVideo
    },
    data() {
        return {
            // 方案3
            flvList: {
                camera1: {
                    name: 'camera1',
                    url: 'rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/201'
                },
                camera2: {
                    name: 'camera2',
                    url: 'rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/101'
                },
                camera3: {
                    name: 'camera3',
                    url: 'rtsp://admin:123456@192.168.1.215:554/Streaming/Channels/201'
                },
                camera4: {
                    name: 'camera4',
                    url: 'rtsp://admin:123456@192.168.1.215:554/Streaming/Channels/101'
                },
                camera5: {
                    name: 'camera5',
                    url: 'rtsp://admin:123456@192.168.1.216:554/Streaming/Channels/201'
                },
                camera6: {
                    name: 'camera6',
                    url: 'rtsp://admin:123456@192.168.1.216:554/Streaming/Channels/101'
                }
            },

            // 方案2
            rtspurl1: "rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/201",
            rtspurl2: "rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/101",

            // 方案1
            hkList: {
                camera01: {
                    szIP: "192.168.1.218", //IP地址
                    szPort: "80", //端口号
                    szUsername: "admin",
                    szPassword: "123456",
                    iChannelID: 5,
                    loadingTime: "1000",
                    width: "420",
                    height: "350",
                    type: "camera01",
                    id:"divPlugin1"
                },
                camera02: {
                    szIP: "192.168.1.218", //IP地址
                    szPort: "80", //端口号
                    szUsername: "admin",
                    szPassword: "123456",
                    iChannelID: 1,
                    loadingTime: "5000",
                    width: "420",
                    height: "350",
                    type: "camera02",
                    id:"divPlugin2"
                },
            }

        }
    },
    mounted() {
        // 方案2时打开
        // this.closedSound();
    },
    created() {

    },
    methods: {
		destroyPlugin(szDeviceIdentify){
			//  https://open.hikvision.com/fileserver/resourcedocsonline/HCWebSDK3.3.0编程指南_20230420134609.pdf    I_DestroyPlugin并未找到对应方法和参数
			WebVideoCtrl.I_DestroyPlugin(szDeviceIdentify)// 如果销毁的只是最后一个视频，前面视频没有销毁
			WebVideoCtrl.I_StopAllPlay();//停止全部播放
			WebVideoCtrl.I_Logout(szDeviceIdentify);//退出
			window.location.reload();//销毁失败强制重载
		},
        closedSound() {
            this.$nextTick(() => {
                this.$refs.video1.volume = 0;
                this.$refs.video2.volume = 0;
            });
        },
    },
};
</script>

<style lang="less">
.video-view {
    .right-v {
        text-align: right;
        position: absolute;
        top: 7%;
        right: 9px;
        right: 10px;
        width: 22%;

        .right-v-one {
            height: 350px;

            .video-img {
                height: 350px;
            }

            .video-img1 {
                //   position: absolute;
                //   top:10%;
            }

            .video-img2 {
                // position: absolute;
                // top: 20%;
            }
        }
    }

    .bottom-v {
        display: flex;
        justify-content: space-between;
        padding: 2px 4px;
    }
}
</style>
